Custom CSS can be used to change the appearance of your LiveForecast element. This can include changing the icons, use a custom font, add additional text, hide information and more.
1. To configure a new CSS, go to the Account Settings in the top menu, and then navigate to Realtime content>LiveForecasts:
2. Click Add New. A Window is loaded in which the default CSS code can be modified.
3. Start by naming the appearance.
4. Make the necessary changes in the CSS. The different sections in the CSS correspond to the following elements in the Forecast:
5. Click Add LiveForecast Appearance to save it. It is now available for selection in your LiveForecast element.
Technical note:
- There is a wrapper <div class="days"> containing the individual day forecasts, this wrapper gets a modifier class of 'days-1', 'days-3', etc, depending on the number of days you are forecasting. You can use this to create CSS columns if so desired. Each day's forecast is contained in a <div class="day">.
- The weather icons shown are set as background images (with an inline style) on <div class="the-image">. This div also gets a modifier class from the following list that you can use to set a custom weather icon: cloudy / fog / lightning / mostly-cloudy / partly-cloudy / pollen / rain-and-snow / rain / sleet / snow / stormy / sunny / windy/
Note: you will need to set an !important on your background-image rule to override the default weather icons.
Example:
the-image.snow { background-image: url(https://www.hostedimage.com/path/to/snow.png) !important; }
- To hide information, such as precipitation, you need to set the corresponding css selector to 'display:none'
Example: .the-day, .weather-description, .precipitation { display: none }
- To use a custom font, you need an externally hosted font, such as a Google font:
Example:
.weather { font-family: ‘Supermercado One’ }
@font-face {
font-family: 'Supermercado One';
font-style: normal;
font-weight: 400;
src: local('Supermercado One Regular'), local('SupermercadoOne-Regular'), url(https://fonts.gstatic.com/s/supermercadoone/v7/kMGPVTNFiFEp1U274uBMb6-Na2KbAihccEZt9q9D_8M.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
- Add additional text, for example to the heading:
Example:
body.weather:before { content: “Heading Text”; display: block; /*further styles for text appearance/alignment }
